<template>
  <div class="page">
    <div class="add_card_box">添加银行卡</div>
    <!-- 299 -->
    <div class="inp_box">
      <label class="label_title" for="">银行卡号</label>
      <input ref="bankNum" class="card_inp" type="text" placeholder="请输入个人储蓄卡/信用卡卡号"
        @input="handleTestPhone($event.target.value)">
      <img v-if="isClosePhone" src="@/assets/Vector@2x.png" class="Vector2x" alt="" @click="handleClearPhone">
    </div>
    <div class="right_box">
      <div class="bank_btn" @click="handleShowBankList">支持银行列表</div>
    </div>
    <van-button class="global_btn" type="danger" :disabled="isNextDisabled" @click="handleNext">下一步</van-button>
  </div>
  <timeOut :isTimeOut="isTimeOut"></timeOut>
</template>

<script setup>
import { paymentListH5, queryOrderExpireTime, quickPayment, agreementAndBankInfo } from '@/api/api.js'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted, getCurrentInstance, inject, watch, onBeforeUnmount } from 'vue'
import { useCounterStore } from '../../store/counter';
const isNextDisabled = ref(true)
const router = useRouter()
const { proxy } = getCurrentInstance()
const isTimeOut = ref(false)
const orderTimer = ref(null)
const effectTime = ref('')
const userInfos = reactive({})
const isClosePhone = ref(false)
const handleClearPhone = () => {
  proxy.$refs.bankNum.value = ''
  isClosePhone.value = false
  isNextDisabled.value = true
}
const handleShowBankList = () => {
  router.push({
    path: '/bankList',
    query: {
      showType: 'readonly'
    }
  })
}
onMounted(() => {
  getOrderTime()
})
onBeforeUnmount(() => {
  clearInterval(orderTimer.value)
})
// 获取订单有效期时间
const getOrderTime = async () => {
  userInfos.value = proxy.$globalFn.getStorage('urlParameters')
  try {
    let res = await queryOrderExpireTime(userInfos.value)
    if (res.retCode == "0000") {
      effectTime.value = res.data;
      startCountDown(); // 开始倒计时
    } else {
      // 订单超时提示
      isTimeOut.value = true;
    }
  } catch (error) {
    console.error(error);
    proxy.$showToast("获取订单有效期时间接口错误，请重新尝试！")
  }
}
// 超时提醒
function timeoutRemind(seconds) {
  if (seconds <= 0) {
    isTimeOut.value = true
  }
}
// 倒计时
function startCountDown() {

  // if (orderTimer.value) {
  //   clearInterval(orderTimer.value);
  //   orderTimer.value = null;
  // }
  orderTimer.value = setInterval(function () {
    effectTime.value -= 1;
    proxy.$globalFn.setStorage('effectTime', effectTime.value)
    if (effectTime.value < 0) return;
    timeoutRemind(effectTime.value);
    if (effectTime.value <= 0 && orderTimer.value) {
      clearInterval(orderTimer.value);
      orderTimer.value = null;
    }
  }, 1000);
}
function trimAll(ele) {
  if (typeof ele === "string") {
    return ele.split(/[\t\r\f\n\s]*/g).join("");
  } else {
    console.error(
      typeof ele +
      "is not the expected type, but the string type is expected"
    );
  }
}
const handleTestPhone = proxy.$_.debounce((val) => {
  let trimNum = trimAll(val)
  if (trimNum == '') {
    isClosePhone.value = false
  } else {
    isClosePhone.value = true
  }
  proxy.$refs.bankNum.value = proxy.$globalFn.addSpaceToNumber(val)
  const msg = proxy.$globalFn.rules('bankNum', trimNum)
  if (msg == true) {
    isNextDisabled.value = false
  } else {
    proxy.$showToast(msg);
    isNextDisabled.value = true
  }
}, 1000)
const handleNext = () => {
  router.push({
    path: '/bindCard',
    query: {
      cardId: trimAll(proxy.$refs.bankNum.value) || ''
    }
  })
}

</script>

<style lang="sass" scoped>
@import '@/styles/variables.scss'
.page
  height: 100%
  background: #fff
  padding: 0px 24px
.right_box
  margin-top: 13px
  margin-bottom: 25px
  text-align: right
.bank_btn
  color: $global_color
  font-size: 14px
  display: inline-block
.add_card_box
  color: #222
  font-size: 18px
  font-weight: bold
  padding: 40px 0
.inp_box
  border-bottom: 1px solid #DEDEDE
  // height: calc( 100% - 1px )
  position: relative
.card_inp
  width: 203px
  font-size: 15px
  margin-bottom: 17px
  outline: none
  border: none
.card_inp::placeholder
  color: #CFCFCF
.label_title
  font-size: 15px
  margin-right: 30px
.Vector2x
  width: 16px
  height: 16px
  position: absolute
  right: 0
  top: 8px
</style>
